Page({
  data: {
    fixedAddress: "北京市八达岭长城", // 固定地址名称
    longitude: 116.01667, // 东经
    latitude: 40.35694,    // 北纬
    markers: [],           // 地图标记点
    hasLocation: false,     // 是否已定位到有效位置
    is3D: false, // 初始为 2D 模式，false 表示 2D，true 表示 3D
    scale: 12, // 初始缩放级别
    value: '', //搜索的值
    station:[{image:'icon-jingdian',name:'景点'},{image:'icon-a-Frame19',name:'出入口'},{image:'icon-shineibaoche',name:'乘车点'},{image:'icon-yiwushi1',name:'医务室'},{image:'icon-weishengjian',name:'卫生间'},{image:'icon-tingchechang',name:'停车场'},{image:'icon-fuwudian',name:'服务点'},{image:'icon-_xican',name:'餐饮'},
    {image:'icon-shop',name:'商场'}], //站点
    stationvalue:0,

    selfLatitude: '',   // 自身纬度
    selfLongitude: '',  // 自身经度
    searchLatitude: '', // 搜索点纬度
    searchLongitude: '',// 搜索点经度
    polyline: [],       // 地图连线数据
    distance: 0,        // 两点距离（米）
    distanceMarkers: [], // （气泡）
    showPopup: false, // 控制弹窗显示
    selectedPOI: null, // 存储选中的POI数据
    
    showPopup: false,
    selectedPOI: {  // 简化数据结构
      title: '',
      address: '',
      tel: '',
      category: '',
      detail: '',
      lat:'',
      lng:''
    }
  },
  onLoad(options) {
    this.goToFixedLocation();
  },
  //选择tabbar
  tabchoose(e){
    const index = e.currentTarget.dataset.stationvalue;
    this.setData({
      stationvalue: index
    })

     //根据选项搜索POI
  const category = this.data.station[index].name; // 获取分类名
  this.searchPOI(category); // 调用搜索方法
  },

  // POI搜索方法
searchPOI(category) {
  const keywordMap = {
    '景点': '八达岭长城景点',
    '出入口': '八达岭长城出入口',
    '乘车点': '八达岭长城接驳车',
    '医务室': '八达岭长城医疗站',
    '卫生间': '八达岭长城厕所',
    '停车场': '八达岭长城停车场',
    '服务点': '八达岭长城游客中心',
    '餐饮': '八达岭长城餐厅',
    '商场': '八达岭长城商店'
  };
  wx.request({
    url: 'https://apis.map.qq.com/ws/place/v1/search',
    data: {
      keyword: keywordMap[category],
      boundary: `nearby(${this.data.latitude},${this.data.longitude},1000)`, //1000米以内
      key: 'IW6BZ-FRML7-4GEXC-PLQOP-YBVMZ-QAFLP'
    },
    success: (res) => {
      if (res.data.status === 0) {
        const searchPoint = res.data.data[0].location;
        this.setData({
          searchLatitude: searchPoint.lat,
          searchLongitude: searchPoint.lng,
        });
        
        if(this.data.selfLongitude!=''&& this.data.selfLatitude!=''){
          this.drawPolylineAndCalculateDistance();
        }
        
        const markers = res.data.data.map((item, i) => ({
          id: i + 100, 
          latitude: item.location.lat,
          longitude: item.location.lng,
          title: item.title,
          iconPath: this.getMarkerIcon(category),
          width: 25,
          height: 25,
          customCallout: { // 添加自定义气泡
            display: 'BYCLICK' // 点击时显示
          },
          poiData: item // 保存完整的POI数据
        }));
        
        markers.push(...this.data.markers.filter(m => m.id === 0));
        this.setData({ markers });
      }
    }
  });
},
onMarkerTap(e) {
  const markerId = e.detail.markerId;
  const marker = this.data.markers.find(m => m.id === markerId);
  console.log(marker.poiData)
  if (!marker || !marker.poiData) {
    console.warn('无效的标记点数据');
    return;
  }

  // 立即显示弹窗和基本信息
  this.setData({
    selectedPOI: {
      title: marker.poiData.title || '未知地点',
      address: marker.poiData.address || '地址未知',
      tel: marker.poiData.tel || '暂无电话',
      category: marker.poiData.category || '未知分类',
      detail: marker.poiData.detail_info?.tag || '暂无详细信息',
      lat:marker.poiData.location.lat,
      lng:marker.poiData.location.lng
    },
    showPopup: true
  });

  // 可选：如果需要更多详细信息，可以保留API请求
  wx.showLoading({ title: '加载中...' });
  wx.request({
    url: 'https://apis.map.qq.com/ws/place/v1/detail',
    data: {
      id: marker.poiData.id,
      key: 'IW6BZ-FRML7-4GEXC-PLQOP-YBVMZ-QAFLP'
    },
    success: (res) => {
      wx.hideLoading();
      if (res.data.status === 0 && res.data.result) {
        this.setData({
          selectedPOI: {
            title: res.data.result.title || marker.poiData.title,
            address: res.data.result.address || marker.poiData.address,
            tel: res.data.result.tel || marker.poiData.tel || '暂无电话',
            category: res.data.result.category || marker.poiData.category || '未知分类',
            detail: res.data.result.detail_info?.tag || '暂无详细信息'
          }
        });
      }
    },
    fail: (err) => {
      wx.hideLoading();
      console.error('详情请求失败:', err);
    }
  });
},


// 当API请求失败时显示基本信息
showBasicInfo(poiData) {
  this.setData({
    selectedPOI: {
      title: poiData.title || '未知地点',
      address: poiData.address || '地址未知',
      tel: poiData.tel || '暂无电话',
      category: poiData.category || '未知分类',
      location: poiData.location || { lat: 0, lng: 0 },
      photo: null,
      detail_info: { tag: '暂无详细信息' },
      photos: []
    },
    showPopup: true
  });
},
onOpenLocation(){
  wx.openLocation({
    latitude: this.data.selectedPOI.lat,
    longitude: this.data.selectedPOI.lng,
    name: this.data.selectedPOI.title,
    address: this.data.selectedPOI.address,
    scale: 18
  });
},
onClosePopup() {
  this.setData({ showPopup: false });
},
getMarkerIcon(category) {
  const icons = {
    '停车场': '/assets/停车场.png',
    '餐饮': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/xican.png',
    '景点': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/jingdian.png',
    '出入口': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/churuko.png',
    '乘车点': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/chengchedian.png',
    '医务室': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/yiwushi.png',
    '卫生间': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/weishengjian.png',
    '服务点': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/fuwudian.png',
    '商场': 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/shangdian.png'
  };
  return icons[category] || 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/zhizheng.png';
},
    // 选择位置
    onClick() {
      wx.chooseLocation({  //弹出地图界面，让用户手动选择位置（含搜索功能）。
        success: (res) => {
          console.log(res)
          if (res.name) {
            this.setData({
              fixedAddress: res.name,
              searchLatitude: res.latitude,  // 手动选点纬度
              searchLongitude: res.longitude // 手动选点经度
            });
            this.updateMapLocation(res.longitude, res.latitude);
            if(this.data.selfLongitude!=''&& this.data.selfLatitude!=''){
            this.drawPolylineAndCalculateDistance();
            }
          }
        },
        fail: () => {
          wx.showToast({
            title: '位置选择失败',
            icon: 'none'
          });
        }
      });
    },
    drawPolylineAndCalculateDistance() {
      const { 
        selfLatitude, selfLongitude, 
        searchLatitude, searchLongitude 
      } = this.data;
    
      // 1. 绘制地图连线（polyline）
      const polyline = [
        {
          points: [
            { latitude: selfLatitude, longitude: selfLongitude }, // 自身位置
            { latitude: searchLatitude, longitude: searchLongitude } // 搜索位置
          ],
          color: '#FF0000',    // 线条颜色
          width: 5,            // 线条宽度
          dottedLine: false,   // 是否虚线
          arrowLine: true
        }
      ];
      this.setData({ polyline });
    
      // 2. 计算两点距离并显示气泡
      wx.request({
        url: 'https://apis.map.qq.com/ws/distance/v1/',
        data: {
          mode: 'walking',
          from: `${selfLatitude},${selfLongitude}`,
          to: `${searchLatitude},${searchLongitude}`,
          key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
        },
        success: (res) => {
          if (res.data.status === 0) {
            const distanceMeter = res.data.result.elements[0].distance; // 米
            const distanceKm = (distanceMeter / 1000).toFixed(2); // 转公里
            
            // 3. 创建显示距离的气泡标记（放在搜索位置上方）
            const distanceMarker = {
              id: 999, // 唯一ID，避免与其他标记冲突
              latitude: searchLatitude, // 气泡位置与搜索点一致
              longitude: searchLongitude,
              width: 0, // 隐藏图标，只显示气泡
              height: 0,
              callout: {
                content: `距离：${distanceKm} 公里`, // 显示距离
                color: '#ffffff', // 字体白色
                bgColor: '#FF0000', // 背景色#97613d
                padding: 8,
                borderRadius: 4,
                display: 'ALWAYS', // 始终显示
                anchorY: 100 // 向上偏移30px，避免遮挡
              }
            };
    
            // 4. 更新数据：保存距离 + 合并气泡标记
            this.setData({
              distance: distanceKm,
              // 合并原有标记和距离气泡（避免覆盖其他标记）
              markers: [...this.data.markers.filter(m => m.id !== 999), distanceMarker]
            });
    
          }
        }
      });
    },
    
    // （可选）经纬度距离计算公式（Haversine 公式）
    calculateDistance(lat1, lng1, lat2, lng2) {
      const rad = (d) => d * Math.PI / 180;
      const R = 6378137; // 地球半径（米）
      const latDiff = rad(lat2 - lat1);
      const lngDiff = rad(lng2 - lng1);
      const a = 
        Math.sin(latDiff / 2) * Math.sin(latDiff / 2) +
        Math.cos(rad(lat1)) * Math.cos(rad(lat2)) * 
        Math.sin(lngDiff / 2) * Math.sin(lngDiff / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return R * c; // 距离（米）
    },
  // 切换 2D/3D 模式
  toggle() {
    this.setData({
      is3D: !this.data.is3D
    });
  },
  // 这里做一个最原始的定位
  goToFixedLocation() {
    wx.showLoading({
      title: '正在定位...',
      mask: true
    });

    // 使用腾讯地图API进行地理编码
    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1/',
      data: {
        address: this.data.fixedAddress,
        key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77' 
      },
      success: (res) => {
        wx.hideLoading();
        if (res.data.status === 0) {
          const location = res.data.result.location;
          this.updateMapLocation(location.lng, location.lat);
        } else {
          wx.showToast({
            title: '地址解析失败',
            icon: 'none'
          });
          this.setData({ hasLocation: false });
        }
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
        this.setData({ hasLocation: false });
      }
    });
  },

  // 将位置数据应用到地图上
  updateMapLocation(longitude, latitude) {
    this.setData({
      longitude,
      latitude,
      hasLocation: true,
      markers: [{
        id: 0,
        latitude,
        longitude,
        title: this.data.fixedAddress,
        iconPath: 'https://dengqirong123.oss-cn-hangzhou.aliyuncs.com/assets/gongonsheshi/zhizheng.png',
        width: 30,
        height: 30,
        callout: {
          content: this.data.fixedAddress,
          color: '#ffffff',
          bgColor: '#1aad19',
          padding: 10,
          borderRadius: 4,
          display: 'ALWAYS'
        }
      }]
    });
  },

  //放大
zoomIn(){
  let scalesss=this.data.scale;
  if(scalesss<20){
    this.setData({
      scale:scalesss+1
    })
  }
},
//缩小
zoomOut(){
  let scalesss=this.data.scale;
  if(scalesss>3){
    this.setData({
      scale:scalesss-1
    })
  }
},
//这个方法是获取我当前的位置
dingwei(){
  this.checkLocationPermission()
},

// 检查定位权限
checkLocationPermission() {
  wx.getSetting({ // 获取当前权限设置
    success: (res) => {
      if (res.authSetting['scope.userLocation']) { //已授权
        this.getCurrentLocation()
      } else {
        this.requestLocationPermission() //未授权
      }
    },
    fail: () => {
      wx.showToast({ title: '检查权限失败', icon: 'none' })
      this.setData({ address: '获取位置失败' })
    }
  })
},

// 未授权
requestLocationPermission() {
  wx.authorize({ //请求权限授权
    scope: 'scope.userLocation',
    success: () => this.getCurrentLocation(),
    fail: () => {
      wx.showModal({
        title: '提示',
        content: '需要位置权限才能获取当前位置',
        confirmText: '去设置',
        success: (res) => {
          if (res.confirm) {
            wx.openSetting({ //打开权限设置页
              success: (res) => {
                if (res.authSetting['scope.userLocation']) {
                  this.getCurrentLocation()
                }
              }
            })
          }
        }
      })
    }
  })
},

// 已授权
getCurrentLocation() {
  wx.showLoading({ title: '定位中...', mask: true })
  
  wx.getLocation({ //获取当前位置
    type: 'gcj02',
    isHighAccuracy: true, // 高精度模式
    success: (res) => {
      this.setData({
        // latitude: res.latitude,
        // longitude: res.longitude
        selfLatitude: res.latitude,  // 保存自身纬度
        selfLongitude: res.longitude // 保存自身经度
      })
      this.reverseGeocoder(res.latitude, res.longitude)
    },
    fail: (err) => {
      console.error('定位失败:', err)
      wx.hideLoading()
      this.setData({ address: '获取位置失败' })
      wx.showToast({
        title: err.errMsg.includes('auth') ? '请授权定位权限' : '定位失败',
        icon: 'none'
      })
    }
  })
},

// 逆地理编码：将经纬度转换成文字地址
reverseGeocoder(latitude, longitude) {
  wx.request({
    url: 'https://apis.map.qq.com/ws/geocoder/v1/',
    data: {
      location: `${latitude},${longitude}`,
      key: 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', // 替换为你的腾讯地图key
      get_poi: 0
    },
    success: (res) => {
      wx.hideLoading()
      if (res.data.status === 0) {
        this.setData({
          address: res.data.result.address || '未知位置'
        })
      } else {
        this.setData({ address: '解析地址失败' })
        console.error('逆地理编码失败:', res.data)
      }
    },
    fail: (err) => {
      wx.hideLoading()
      console.error('请求失败:', err)
      this.setData({ address: '网络请求失败' })
    }
  })
},

// 刷新定位
refreshLocation() {
  this.checkLocationPermission()
},


});
